<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Editor</title>

    <script src="/static/js/jquery-3.4.1.min.js"></script>
    <script src="/static/js/jquery.validate.js"></script>
    <script src="/static/js/jsbeautify.js"></script>
    <style>
        #form p {
            position: relative;
            padding-top: 20px;
        }

        .active {
            border: 1px solid #1890ff !important;
        }

        .form_labelText_text {
            top: -280px;
        }

        .form_textarea {
            height: 280px;
        }

        #checkContent {
            color: #F89406;
            position: relative;
            top: -150px;
            left: 5px;
            width: 14%;
            display: inline-block;
        }

        .form_audit {
            background: #1890ff;
            border: none;
            color: #fff;
            padding: 0 20px;
            position: relative;
            cursor: pointer;
            height: 30px;
            text-align: center;
            border-radius: 4px;
            font-weight: 500;
        }

        .btn_box {
            text-align: center;
            margin: 10px 0;
        }

        .btn_box > button:nth-of-type(1) {
            margin-right: 10px;
        }

        .error {
            color: #cf1322;
            border: 1px solid #cf1322 !important;
            margin-right: 5px;
        }

        #ccontent + label {
            border: none !important;
            position: relative;
            top: -170px;
            left: 5px;
        }

        select[name="lang"] {
            color: #000 !important;
            width: 70.8%;
        }

        select[name="lang"] + label {
            border: none !important;
        }

        /*审核按钮样式*/
        #review_cb {
            display: none;
        }

        .review_wrap {
            width: 65px;
            height: 30px;
            background: #1890ff;
            position: relative;
            border-radius: 5px;
            display: inline-block;
            left: 10px;
            top: 10px;
        }

        .review_wrap:before {
            content: 'On';
            position: absolute;
            top: 7px;
            left: 8px;
            height: 2px;
            color: #fff;
            font-size: 14px;
        }

        .review_wrap:after {
            content: 'Off';
            position: absolute;
            top: 7px;
            left: 38px;
            height: 2px;
            color: #BFBFBF;
            font-size: 14px;
        }

        .review_wrap label {
            display: block;
            width: 26px;
            height: 16px;
            border-radius: 50px;
            -webkit-transition: all .5s ease;
            -moz-transition: all .5s ease;
            transition: all .5s ease;
            cursor: pointer;
            position: absolute;
            top: 7px;
            z-index: 1;
            left: 6px;
            background: #BFBFBF;
        }

        .review_wrap input[type=checkbox]:checked + label {
            left: 34px;
            background: #fff;
        }

        .tab_header {
            position: absolute;
            z-index: 999;
            margin-left: 25%;
        }

        /* showFileName */
        .showFileName {
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            color: #000;
            background: #fafafa;
            overflow: hidden;
            /*display: none;*/
            *display: inline;
            *zoom: 1
        }

        /* fileerrorTip */
        .fileerrorTip {
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            color: #000;
            background: #fafafa;
            overflow: hidden;
            /*display: none;*/
            *display: inline;
            *zoom: 1
        }

        /*a  upload */
        .a-upload {
            /*display: none;*/
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;
            position: relative;
            cursor: pointer;
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
            /*display: inline-block;*/
            *display: inline;
            *zoom: 1
        }

        .a-upload input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
            filter: alpha(opacity=0);
            cursor: pointer
        }

        .a-upload:hover {
            color: #444;
            background: #eee;
            border-color: #ccc;
            text-decoration: none
        }

        #form fieldset {
            padding-bottom: 280px;
        }
    </style>
</head>
<body>
<div class="add">
    <form method="post" name="form" id="form">
        <fieldset>
            {{if eq .ACTION_NAME "Add"}}
                <legend data-action="true" id="legend">新增</legend>
            {{else}}
                <legend data-action="false" id="legend">编辑</legend>
            {{end}}
            <p>
                <label for="dynasty" class="form_labelText"><span
                            class="required">*</span>选择接口：</label>
                {{if eq .ACTION_NAME "Edit"}}
                    <select name="interface_id" id="interface_id" required>
                        <option value="{{.corr_interfacedefine.Id}}" selected="selected"
                        >{{.corr_interfacedefine.Name}}</option>
                    </select>
                {{else}}
                    <select name="interface_id" id="interface_id" required>
                        <option value="" selected="selected">选择接口</option>
                        {{range $index, $vo := .interfacedefine}}
                            <option value="{{$vo.Id}}">{{$vo.Name}}</option>
                        {{end}}
                    </select>
                {{end}}
            </p>
            <p>
                <label for="name" class="form_labelText"><span class="required">*</span>接口名称
                    ：</label>
                <input name="name" required id="name" value={{.Data.Name}}>
                <span id="checkName"></span>
            </p>
            <p>
                <label for="api_id" class="form_labelText"><span
                            class="required">*</span>接口id
                    ：</label>
                <input type="text" name="api_id" required id="api_id"
                       {{if eq .ACTION_NAME "Edit"}}readonly{{end}} value={{.Data.ApiId}}>
                <span id="checkApiId"></span>
            </p>
            <p>
                <label for="cached" class="form_labelText"><span
                            class="required">*</span>是否缓存：</label>
                <select name="cached" id="cached" required>
                    {{if eq .ACTION_NAME "Add"}}
                        <option value="" selected="selected">请选择状态</option>
                        <option value="1">是</option>
                        <option value="0">否</option>

                    {{else}}
                        <option value="1" {{if eq .Data.Cached "1"}} selected="selected" {{end}}>
                            是
                        </option>
                        <option value="0" {{if eq .Data.Cached "0"}} selected="selected" {{end}}>
                            否
                        </option>
                    {{end}}
                </select>
            </p>
            <p>
                <label for="cachtime" class="form_labelText">缓存时长：</label>
                <select name="cachtime" id="cachtime">
                    {{if eq .ACTION_NAME "Add"}}
                        <option value="" selected="selected">请选择缓存时间</option>
                        <option value="600">10 Mins</option>
                        <option value="3600">1 Hour</option>
                        <option value="86400">24 Hours</option>
                    {{else}}
                        <option value="" selected="selected">请选择缓存时间</option>
                        <option value="600" {{if eq .Data.CachTime "600"}} selected="selected" {{end}}>
                            10 Mins
                        </option>
                        <option value="3600" {{if eq .Data.CachTime "3600"}} selected="selected" {{end}}>
                            1 Hour
                        </option>
                        <option value="86400" {{if eq .Data.CachTime "86400"}} selected="selected" {{end}}>
                            24 Hour
                        </option>
                    {{end}}
                </select>
            </p>
            <p>
                <label for="trans_all" class="form_labelText"><span
                            class="required">*</span>是否透传：</label>
                <select name="trans_all" id="trans_all" required>
                    {{if eq .ACTION_NAME "Add"}}
                        <option value="" selected="selected">请选择</option>
                        <option value="1">是</option>
                        <option value="0">否</option>

                    {{else}}
                        <option value="1" {{if eq .Data.TransAll "1"}} selected="selected" {{end}}>
                           是
                        </option>
                        <option value="0" {{if eq .Data.TransAll "0"}} selected="selected" {{end}}>
                            否
                        </option>
                    {{end}}
                </select>
            </p>
            <p>
                <label for="paramtype" class="form_labelText">参数类型：</label>
                <input type="text" name="paramtype" id="paramtype" readonly
                        {{if eq .ACTION_NAME "Edit"}} value={{.Data.Paramtype}} {{end}}>
            </p>
            <p style="margin-left:130px;">
                {{if eq .ACTION_NAME "Edit"}}
                    {{if eq .corr_interfacedefine.Paramtype "file"}}
                        <a href="javascript:;" class="a-upload" id="a-upload">
                            <input type="file" name="file" id="fileupload">文件
                        </a><label class="fileerrorTip" id="fileerrorTip"></label><label class="showFileName"
                                                                                         id="showFileName"></label>
                    {{end}}
                {{else}}
                    <a href="javascript:;" class="a-upload" id="a-upload" hidden>
                        <input type="file" name="file" id="fileupload">文件
                    </a><label class="fileerrorTip" id="fileerrorTip"></label><label class="showFileName"
                                                                                     id="showFileName"></label>
                {{end}}

            </p>
            <p>
                <label for="headers" class="form_labelText  form_labelText_text">头：</label>
                <textarea class="form_textarea" name="headers" id="headers">{{.Data.Headers}}</textarea>
            </p>
            <p>
                <label for="params_map" class="form_labelText  form_labelText_text">参数对照:</label>
                <textarea class="form_textarea" name="params_map" id="params_map">{{.Data.ParamsMap}}</textarea>
            </p>
            <div class="btn_box">
                <button class="button_grey form_btn" type="button"
                        onclick="beatyParam()"
                        name="beatyparam"><span>美化</span></button>
            </div>
            <p>
                <label for="params_example"
                       class="form_labelText  form_labelText_text">参数样例:</label>
                <textarea class="form_textarea" name="params_example"
                          id="params_example">{{.Data.ParamsExample  }}</textarea>
            </p>

            <p>
                <label for="apiresult"
                       class="form_labelText  form_labelText_text">接口数据：</label>
                <textarea class="form_textarea" name="apiresult" id="apiresult"></textarea>
            </p>
            <p>
                <label for="outstruct" class="form_labelText  form_labelText_text"><span
                            class="required">*</span>输出模板：</label>
                <textarea class="form_textarea" name="outstruct" required id="outstruct">{{.Data.OutStruct}}</textarea>
            </p>
            <p>
                <label for="outresult" class="form_labelText  form_labelText_text">最终数据：</label>
                <textarea class="form_textarea" name="outresult" id="outresult"></textarea>
            </p>
            <div class="btn_box">
                <input type="hidden" name="id" value="{{.Data.Id}}"/>
                <button class="button_grey form_btn" type="submit" name="submit">
                    <span>保存</span></button>
                <button class="button_grey form_btn" type="button"
                        onclick="tryInterface()"
                        id="tryit"><span>读取接口</span></button>
                <button class="button_grey form_btn" type="button"
                        onclick="readData()"
                        name="generatedata"><span>生成数据</span></button>
                <button class="button_grey form_cancel" type="button" onclick="self.location=document.referrer;">
                    <span>取消</span></button>
            </div>
            <p>
                <label for="dynasty" class="form_labelText">请选择后置接口：</label>
                {{if eq .ACTION_NAME "Edit"}}
                    <select name="interface_after_apiid" id="interface_after_apiid">
                        <option value="" selected="selected">请选择后置接口</option>
                        {{range $index, $vo := .interfaceafterList}}
                            <option value="{{$vo.ApiId}}"{{if eq $vo.ApiId $.Data.InterfaceAfterApiID}} selected="selected" {{end}}>{{$vo.Name}}</option>{{end}}
                    </select>
                {{else}}
                    <select name="interface_after_apiid" id="interface_after_apiid">
                        <option value="" selected="selected">请选择后置接口</option>
                        {{range $index, $vo := .interfaceafterList}}
                            <option value="{{$vo.ApiId}}">{{$vo.Name}}</option>
                        {{end}}
                    </select>
                {{end}}
            </p>
            <p class="btn_box" id="afterbtnbox" {{if eq .ACTION_NAME "Edit" }}
            {{if eq $.Data.InterfaceAfterApiID  "" }}hidden{{else}}{{end}}
            {{else}}hidden{{end}}>
                <button class="button_grey form_btn" type="button"
                        onclick="afterInterface()"
                        id="tryafterinterface"><span>读取后置接口</span></button>
                <button class="button_grey form_btn" type="button"
                        onclick="readAfterData()"
                        id="generatefinaldata"><span>读取后置接口</span></button>
            </p>
            {{/*            如果是 选择了后续接口*/}}
            {{ if  ne $.Data.InterfaceAfterApiID  "" }}
                <div id="interface_after" name="interface_after">
                    <p id="interface_after_usage" style="margin:30px 0 10px 0;"><label
                                class="form_labelText">上面接口结果用于：</label>
                        <span class="item">
               <input size="40" type="radio" {{if eq $.Data.InterfaceAfterUsage "headers"}}checked{{else}}{{end}} id=""
                      name="interface_after_usage"
                      value="headers"/>
                <label for="headers" class="usergroup_checkLab">头</label>
                 </span>
                        <span class="item">
               <input size="40" type="radio" id=""
                      {{if eq $.Data.InterfaceAfterUsage "params_example"}}checked{{else}}{{end}} name="interface_after_usage"
                      value="params_example"/>
                            <label for="params_example"
                                   class="usergroup_checkLab">请求参数</label></span>
                        <span><input size="40" type="radio" id=""
                                     {{if eq $.Data.InterfaceAfterUsage "outresult"}}checked{{else}}{{end}} name="interface_after_usage"
                                     value="outresult"/>
                <label for="outresult" class="usergroup_checkLab">最终数据</label>
                 </span>
                    </p>
                    <p style="margin-left:130px;">
                        <a href="javascript:;" class="a-upload" id="a-upload_after" hidden>
                            <input type="file" name="file_after"
                                   id="fileupload_after">文件上传
                        </a><label class="fileerrorTip" id="fileerrorTip_after"></label><label class="showFileName"
                                                                                               id="showFileName_after"></label>
                    </p>
                    <input type="text" hidden value="{{$.interfaceafter.Cached}}" id="cached_after"/>
                    <input type="text" hidden value="{{$.interfaceafter.InterfaceId}}" id="interfaceid_after"/>
                    <p>
                        <label for="headers_after"
                               class="form_labelText  form_labelText_text">头
                            ：</label>
                        <textarea readonly class="form_textarea" name="headers_after"
                                  id="headers_after">{{$.interfaceafter.Headers}} </textarea>
                    </p>
                    <p>
                        <label for="params_example_after"
                               class="form_labelText  form_labelText_text">参数样例:</label>
                        <textarea class="form_textarea" name="params_example_after"
                                  id="params_example_after">{{$.interfaceafter.ParamsExample}}</textarea>
                    </p>
                    <p>
                        <label for="apiresult_after"
                               class="form_labelText  form_labelText_text"> 接口数据：</label>
                        <textarea readonly class="form_textarea" name="apiresult_after" id="apiresult_after"></textarea>
                    </p>
                    <p>
                        <label for="outstruct_after" class="form_labelText  form_labelText_text"><span
                                    class="required">*</span>模板结构：</label>
                        <textarea readonly class="form_textarea" name="outstruct_after" required
                                  id="outstruct_after">{{$.interfaceafter.OutStruct}}</textarea>
                    </p>
                    <p>
                        <label for="outresult_after"
                               class="form_labelText  form_labelText_text">最终数据：</label>
                        <textarea readonly class="form_textarea" name="outresult_after" id="outresult_after"></textarea>
                    </p>
                </div>
            {{else}}
                <div id="interface_after" name="interface_after" hidden>
                    <p style="margin:30px 0 10px 0;"><label class="form_labelText">参数用于:</label>
                        <span class="item"><input size="40" type="radio" id="" name="interface_after_usage"
                                                  value="headers"/><label for="header"
                                                                          class="usergroup_checkLab">头</label></span>
                        <span class="item"><input size="40" type="radio" id="" name="interface_after_usage"
                                                  value="params_example"/><label for="params"
                                                                                 class="usergroup_checkLab">参数</label></span>
                        <span><input size="40" type="radio" id="" name="interface_after_usage" value="outresult"/><label
                                    for="outresult"
                                    class="usergroup_checkLab">最终数据</label>
                 </span>
                    </p>
                    <p style="margin-left:130px;"><a href="javascript:;" class="a-upload" id="a-upload_after"><input
                                    type="file" name="file_after" id="fileupload_after">Upload File</a><label
                                class="fileerrorTip" id="fileerrorTip_after"></label><label class="showFileName"
                                                                                            id="showFileName_after"></label>
                    </p>
                    <p><label for="headers_after"
                              class="form_labelText  form_labelText_text">头:</label><textarea readonly class="form_textarea" name="headers_after"
                                               id="headers_after">{}</textarea></p>
                    <p><label for="params_example_after"
                              class="form_labelText  form_labelText_text">参数样例:</label><textarea readonly class="form_textarea" name="params_example_after"
                                               id="params_example_after"> </textarea></p>
                    <p>
                        <label for="apiresult_after"
                               class="form_labelText  form_labelText_text">结果：</label>
                        <textarea class="form_textarea" readonly name="apiresult_after" id="apiresult_after"></textarea>
                    </p>
                    <p><label for="outstruct_after" class="form_labelText  form_labelText_text"><span
                                    class="required">*</span>模板结构：</label><textarea
                                class="form_textarea" readonly name="outstruct_after" required
                                id="outstruct_after">{}</textarea>
                    </p>
                    <p>
                        <label for="outresult_after"
                               class="form_labelText  form_labelText_text">最终数据：</label>
                        <textarea class="form_textarea" readonly name="outresult_after" id="outresult_after"></textarea>
                    </p>
                </div>
            {{end}}
        </fieldset>
    </form>
</div>
</body>
<script type='text/javascript'>
    $('#interface_id').selectMania({
        size: 'small',
        themes: ['square'],
        // placeholder: '--请选择--',
        removable: true,
        search: true,
    });
    $('#interface_after_apiid').selectMania({
        size: 'small',
        themes: ['square'],
        // placeholder: '--请选择--',
        removable: true,
        search: true,
    });

    var jokeJs = {
        validate: function () {
            $("#form").validate({
                rules: {
                    content: "required",
                    tag: "required"
                }
            });

            $.validator.messages = {
                required: '必填'
            }
        }

    }

    for (var i in jokeJs) {
        if (typeof jokeJs[i] == 'function') {
            jokeJs[i]();
        }
    }
    $("#form").on("submit", function (a, b, c) {
        let cach = $("#cached").val(),
            cachtime = $("#cachtime").val();
        if (cach == "1" && cachtime.trim() == "") {
            alert("请选择缓存时间")
            return false
        }
    });

    //美化js对象
    function do_js_beautify(s) {
        if (s == undefined) {
            s = ""
        }
        var js_source = s.replace(/^\s+/, '');
        if (js_source.length == 0)
            return;
        var tabsize = 4;
        tabchar = ' ';
        if (tabsize == 1)
            tabchar = '\t';
        return js_beautify(js_source, tabsize, tabchar);
    }

    let firstUpperCase = ([first, ...rest]) => first.toUpperCase() + rest.join('')
    let notAvalible = []

    //检测参数对照是否一致,并返回生成的对象
    function checkParams(p_example, p_map, p_params) {
        for (let e in p_example) {
            for (let m in p_map) {
                // let evalstr = "$eval_"
                // if (m.startsWith(evalstr)) {
                //     let str = m.split(evalstr)
                //     if (str.length == 2) {
                //         p_params[str[1]] = "$eval_src"
                //     }
                //     continue
                // }
                if (typeof (p_map[m]) == "object") {
                    if (m == e) {
                        p_params[m] = {}
                        checkParams(p_example[e], p_map[m], p_params[m])
                        break;
                    }
                } else {
                    if (Object.keys(p_example).indexOf(p_map[m]) >= 0) {
                        if (p_map[m] == e) {
                            p_params[m] = p_example[e]
                            delete p_map[e]
                            break;
                        }
                    } else {
                        if (notAvalible.indexOf(p_map[m]) < 0) {
                            notAvalible.push(p_map[m])
                        }
                    }
                }
            }
        }
    }

    //生成数据
    function tryInterface() {
        let interfaceId = $("#interface_id").val()
        let params_example = $("#params_example").val()
        let params_map = $("#params_map").val()
        let outstruct = $("#outstruct").val()
        let headers = $("#headers").val();
        let api_id = $("#api_id").val();
        let cached = $("#cached").val();
        let cachtime = $("#cachtime").val();

        let p_example, p_map, p_params = {};
        notAvalible = new Array();
        try {
            p_map = JSON.parse(params_map.toString())
            p_example = JSON.parse(params_example.toString())
            if (Object.keys(p_example).length != Object.keys(p_map).length) {
                alert("param example is not right")
                return
            }
            checkParams(p_example, p_map, p_params);
            if (notAvalible.length > 0) {
                notAvalible.push("params above are not mapped")
                alert(notAvalible.join("\n"))
                return
            }
            if (Object.keys(p_params).length != Object.keys(p_example).length) {
                alert("param example is not right")
                return
            }
        } catch (e) {
            alert(e.message)
            return
        }
        const url = "/interfaceusage/tryinterface";
        const success = function (data) {
            if (data && data.data) {
                $('#apiresult').html("")
                let fjs = do_js_beautify(JSON.stringify(data["data"]))
                $("#apiresult").val(fjs);
            } else {
                if (data.msg != undefined) {
                    alert(data.msg)
                } else {
                    alert(data)
                }
            }
        };
        const fail = function (e) {
            alert(e)
        }
        if ($("#a-upload")[0] && $("#a-upload")[0].hidden != true) {
            if ($("#fileupload")[0] && $("#fileupload")[0].files) {
                if ($("#fileupload")[0].files.length == 0) {
                    alert("Please upload an image")
                    return
                }
                var formData = new FormData();
                formData.append("file", $("#fileupload")[0].files[0]);
                formData.append("interfaceId", interfaceId);
                formData.append("params", JSON.stringify(p_params));
                formData.append("headers", headers);
                formData.append("outstruct", outstruct);
                formData.append("api_id", api_id);
                formData.append("cached", cached);
                formData.append("cachtime", cachtime);


                $.ajax({
                    type: "post",
                    url: url,
                    data: formData,
                    dataType: "JSON",
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: success,
                    fail: fail
                })
            }
        } else {
            $.ajax({
                type: "post",
                url: url,
                data: {
                    interfaceId: interfaceId,
                    params: JSON.stringify(p_params),
                    headers: headers,
                    outstruct: outstruct,
                    api_id: api_id,
                    cached: cached,
                    cachtime: cachtime
                },
                success: success,
                fail: fail
            });
        }
    }

    //根据结构生成最终数据
    function generateData(apiresult, outstruct, transall, outresultDom, paramFor, firstresult) {
        $.ajax({
            type: "post",
            url: "/interfaceusage/generatedata",
            data: {
                outstruct: outstruct,
                apiresult: apiresult,
                transall: transall,
                paramfor: paramFor,
                firstresult: firstresult
            },
            success: function (data) {
                if (data.data == "") {
                    alert(data.msg)
                    return
                }
                outresultDom.html("")
                let fjs = do_js_beautify(data["data"])
                outresultDom.val(fjs);
            },
            fail: function (a, b, c) {
                alert(a)
            }
        });
    }

    //读取后置接口数据
    function readAfterData() {
        let firstresult = $("#outresult").val();
        let apiresult = $("#apiresult_after").val();
        if (apiresult.trim() == "") {
            alert("please get the api data first");
            return;
        }
        let outstruct = $("#outstruct_after").val(),
            transall = $("#trans_all_after").val(),
            outresultDom = $('#outresult_after'),
            paramFor = $("input[name=interface_after_usage]:checked").val();
        generateData(apiresult, outstruct, transall, outresultDom, paramFor, firstresult)
    }

    //读取数据
    function readData() {
        let apiresult = $("#apiresult").val();
        if (apiresult.trim() == "") {
            alert("please get the api data first");
            return;
        }
        let outstruct = $("#outstruct").val(), transall = $("#trans_all").val(),
            outresultDom = $('#outresult');
        generateData(apiresult, outstruct, transall, outresultDom)
    }

    //得到后续接口的数据
    function afterInterface() {
        let params_example_after = $("#params_example_after").val()
        let api_id = $("#interface_after_apiid").val()
        let headers_after = $("#headers_after").val()
        let outstruct_after = $("#outstruct_after").val()
        let cached = $("#cached_after").val()
        let interfaceId = $("#interfaceid_after").val()
        if (api_id.trim() == "" || outstruct_after.trim() == "") {
            alert("params is not right")
            return
        }
        const success = function (data) {
            if (data && data.data) {
                $('#apiresult_after').html("")
                let fjs = do_js_beautify(JSON.stringify(data["data"]))
                $("#apiresult_after").val(fjs);
            } else {
                if (data.msg != undefined) {
                    alert(data.msg)
                } else {
                    alert(data)
                }
            }
        };
        const fail = function (a, b, c) {
            alert(a)
        }
        if ($("#a-upload_after")[0] && $("#a-upload_after")[0].hidden != true && $("#a-upload_after")[0].style.display != "none") {
            let formData = new FormData();
            formData.append("api_id", api_id);
            formData.append("outstruct", JSON.stringify(outstruct_after.trim()));
            formData.append("params", params_example_after.trim());
            formData.append("headers", headers_after.trim());
            formData.append("cached", cached);
            formData.append("interfaceId", interfaceId);
            $.ajax({
                type: "post",
                url: "/interfaceusage/tryinterface",
                data: formData,
                dataType: "JSON",
                cache: false,
                processData: false,
                contentType: false,
                success: success,
                fail: fail
            })
        } else {
            $.ajax({
                type: "post",
                url: "/interfaceusage/tryinterface",
                data: {
                    api_id: api_id,
                    outstruct: outstruct_after.trim(),
                    params: params_example_after.trim(),
                    headers: headers_after.trim(),
                    interfaceId: interfaceId,
                    cached: cached
                },
                success: success,
                fail: fail
            });
        }


    }

    function beatyParam() {
        let param = $("#params_map").val()
        let fjs = do_js_beautify(param)
        $("#params_map").val(fjs);
        let headers = $("#headers").val()
        fjs = do_js_beautify(headers)
        $("#headers").val(fjs);

        let params_example = $("#params_example").val()
        fjs = do_js_beautify(params_example)
        $("#params_example").val(fjs);
    }

    function handleParams(param_obj) {
        try {
            for (let i in param_obj) {
                if (typeof (param_obj[i]) == "object") {
                    handleParams(param_obj[i])
                } else {
                    param_obj[i] = i
                }
            }
        } catch (e) {
            alert(e)
        }
    }


    //通过interfaceid得到接口信息
    function getInterfaceInfo(url, inter_id, fn) {
        if (inter_id == "" || url == "") {
            return
        }
        if (typeof (fn) != "function") {
            return
        }
        $.ajax({
            type: "post",
            url: url,
            data: {"interface_id": inter_id},
            success: function (sms) {
                if (sms.status == true && sms.data != null) {
                    let paramObj = JSON.parse(sms.data.params)
                    handleParams(paramObj)
                    let fjs = do_js_beautify(JSON.stringify(paramObj))
                    fn(sms, fjs)
                }
            },
            fail: function (a, b, c) {
                console.log(a)
            }
        });
    }

    //文件上传事件
    const fileUpload = function (tipDom, showDom) {
        return function () {
            var filePath = $(this).val();
            if (filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) {
                tipDom.html("").hide();
                var arr = filePath.split('\\');
                var fileName = arr[arr.length - 1];
                showDom.html(fileName);
            } else {
                showDom.html("");
                tipDom.html("您未上传文件，或者您上传文件类型有误！").show();
                return false
            }
        }
    }


    $("#a-upload").on("change", "input[type='file']", fileUpload($("#fileerrorTip"), $("#showFileName")))
    $("#a-upload_after").on("change", "input[type='file']", fileUpload($("#fileerrorTip_after"), $("#showFileName_after")))

    //后置接口下拉框选择事件
    function interfaceAfterClick() {
        let inter_id = $("#interface_after_apiid").val();
        if (inter_id.trim() != "") {
            $("#interface_after").show()
            $("#tryafterinterface").show()
            $("#afterbtnbox").show()
            // $("#form")[0].scrollIntoView(false)
            getInterfaceInfo("/interfaceusage/getparams", inter_id, function (sms, fjs) {
                if (sms.data) {
                    $('#params_example_after').val(sms.data.params)
                    $('#headers_after').val(sms.data.headers)
                    $("#apiresult_after").val(sms.data.outresult)
                    if (sms.data.paramtype != "file") {
                        $("#a-upload_after").hide();
                        $("#fileerrorTip_after").hide();
                        $("#showFileName_after").hide();
                    } else {
                        $("#a-upload_after").show();
                        $("#fileerrorTip_after").show();
                        $("#showFileName_after").show();
                    }
                }
            })
        } else {
            $("#interface_after").hide()
            $("#tryafterinterface").hide()
            $("#afterbtnbox").hide()
        }
    }

    //第三方接口下拉框选择事件
    function getInterInfo() {
        getInterfaceInfo("/interfacedefine/getparams", $("#interface_id").val(), function (sms, fjs) {
            $('#params_map').val(fjs)
            if (sms.data) {
                $('#params_example').val(sms.data.params)
                $('#headers').val(sms.data.headers);
                $("#paramtype").val(sms.data.paramtype)
                if (sms.data.paramtype != "file") {
                    $("#a-upload").hide();
                    $("#fileerrorTip").hide();
                    $("#showFileName").hide();
                } else {
                    $("#a-upload").show();
                    $("#fileerrorTip").show();
                    $("#showFileName").show();
                }
            }
        })
    }

    //radio点击事件,将接口结果用于header还是params
    function radioClick() {
        let v = this.value, checkObj = $("#" + v + "_after");
        if (v == "outresult") {
            return
        }
        if (checkObj[0] == undefined) {
            return
        }
        let p = checkObj.val(), p_map = {}, p_example = {}, p_params = {};
        if (p && p.trim() != "") {
            p_map = JSON.parse(p)
        }
        if ($("#outresult").val() && $("#outresult").val().trim() != "") {
            p_example = JSON.parse($("#outresult").val());
        }
        checkParams(p_example, p_map, p_params);
        if (Object.keys(p_params).length) {
            checkObj.val(do_js_beautify(JSON.stringify(p_params)))
        }
    }

    $(function () {
        $("#interface_id").append().siblings('.select-mania-dropdown').children('.select-mania-items-container').children('.select-mania-items').click(getInterInfo)
        $("#interface_after_apiid").append().siblings('.select-mania-dropdown').children('.select-mania-items-container').children('.select-mania-items').click(interfaceAfterClick)
        // $("#interface_after_apiid").click(interfaceAfterClick)
        $("input:radio").change(radioClick)
    })
</script>
</html>